<template>
    <div class="container">
        <div v-if="showHomePage" class="header">
            <div>
                <img class="logo" src="@/assets/images/sq_logo.png" alt="">    <!--顺汽logo-->
                <!--<img class="logo" src="@/assets/images/gmxc_logo.png" alt="">-->    <!--高明校车logo-->
                <!--<img class="logo" src="@/assets/images/ghlogo.png" alt="">-->    <!--三水国鸿logo-->
                <!--<img class="logo" src="@/assets/images/zelogo.png" alt="">-->   <!--中尔logo-->
                <span class="h1">{{sysTitle}}</span>
            </div>
            <!--<div class="h2">欢迎乘坐定制客运，购买定制客运服务</div>-->
            <div class="h2">欢迎乘坐顺汽巴士，提供商旅出行服务</div>
            <!--<div class="h2 phone" @click="callPhone" data-phone="0757-88219910">咨询电话：0757-88219910</div>--> <!--高明电话-->
            <div class="h2 phone" @click="callPhone" data-phone="0757-22339920">咨询电话：0757-22339920</div>    <!--顺汽电话-->
        </div>
        <div v-if="showHomePage" class="main">
            <ul class="content">
                <router-link :to="item.url" class="nav-wrap" v-for="(item,index) in navList" :key="index" style="background-color: #fff;">
                    <div class="icon">
                        <img :src="require('@/assets/images/' + item.icon )" alt="">
                    </div>
                    <div>
                        <div class="title">{{item.title}}</div>
                        <div class="message">{{item.message}}</div>
                    </div>
                </router-link>
            </ul>
            <div class="version">{{version}}</div>
        </div>
        <PopupA :setyyy="setyyy" :userInfo="userInfo" :showHome="showHome" ref="_PopupA" v-if="!isReg" />
<!--        <Yzm />-->
    </div>
</template>

<script>
  import * as dd from 'dingtalk-jsapi';
  import { setToken } from "../../utils/cache";
  import PopupA from "./popup.vue";
  import { getUserInfo } from "@/request/api";
  export default {
    name: "m-home",
    data (){
      return {
        userInfo: {},
        showHomePage: false,
        isReg: true,
        sysTitle: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_SYSTITLE : window.webConfig.webSystemTitle,
        navList:[
          {url: '/cagreementList',title: '购票协议',message: '查询服务协议',icon: 'icon_agreement.svg'},
          {url: '/cbuyTicket',title: '购买定制客运车票',message: '购买月票、学期票',icon: 'icon_ticket.svg'},
          // {url: '/payIndex',title: '乘车缴费',message: '查询缴费记录、支付',icon: 'icon_pay.svg'},
          {url: '/cpassengerList',title: '乘车人信息',message: '提前添加乘车人信息',icon: 'icon_passenger.svg'},
          {url: '/guardian',title: '监护人',message: '查看监护人信息',icon: 'icon_guardian.svg'},
          {url: '/cticketRecord',title: '购买记录',message: '查询购票记录',icon: 'icon_record.svg'},
          // {url: '/leaveList',title: '请假登记',message: '查询请假记录、登记请假',icon: 'icon_leave.svg'},
        ],
        version: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_VERSION : window.webConfig.webVersion
      }
    },
    components:{ PopupA },
    mounted(){
      this.getUserInfo()
      this.$Loading()
      let token = this.$route.query.token;
      if (token){
        setToken(token);
        location.replace('./index.html');
      }
    },
    methods: {
      callPhone(e){
        let phone = e.target.dataset.phone;
        window.location.href = `tel:${phone}`
      },
      showHome (e) {
        this.showHomePage = e
      },
      // 注册成功
      setyyy () {
        this.isReg = true
        this.showHomePage = true
      },
      getUserInfo() {
        // 获取免登授权码
        dd.runtime.permission.requestAuthCode({
          corpId: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_CORPID : window.webConfig.webCorpId, // 从开放平台获取
          onSuccess: (res) => {
            const code = res.code; // 临时授权码
            // 发送code到你的后端服务，换取用户信息
            getUserInfo({ code: code }).then(n => {
              console.log(n.data);
              const obj = n.row[0] || {}
              this.isReg = obj.is_reg
              if (this.isReg) {
                this.showHomePage = true
              }
              this.$nextTick(() => {
                this.$hideLoading()
              })
              this.userInfo = obj;
            })
          },
          onFail: () => { /* 处理错误 */ }
        });
      }
    }
  }
</script>

<style scoped lang="less">
    .container{
        background: #fff;

    }
    .header{
        background: url("@/assets/images/bg_arc.svg") no-repeat;
        background-size: 100%;
        height: 191px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .logo{
            /*height: 56px;*/
            /*height: 30px;*/
            height: 50px;
            /*width: 86px;*/
            vertical-align: middle;
            /*margin-right: 10px;*/
        }
        .h1{
            font-size: 30px;
            vertical-align: middle;
        }
        .h2{
            font-size: 17px;
            line-height: 30px;
        }
        .phone{
            text-decoration: underline;
        }
    }
    .main{
        /*overflow: auto;*/
        height: 0;
        position: relative;
        & > ul{
            box-sizing: border-box;
            padding: 15px;
            z-index: 1;
            height: 100%;
            overflow: auto;
            position: absolute;
            top: 0;
            width: 100%;
        }
        .nav-wrap{
            box-shadow: 0 5px 10px 1px rgba(33,33,33,0.1);
            width: 100%;
            height: 91px;
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            .icon{
                width: 32px;
                height: 32px;
                margin: 0 20px;
                &> img{
                    height: 100%;
                    width: 100%;
                }
            }
            .title{
                color: #001A0D;
                font-size: 20px;
                line-height: 34px;
            }
            .message{
                font-size: 15px;
                color: #C4C9C6;
            }
        }

    }
    .version{
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        /*z-index: -1;*/
    }
    .wrap{
        position: relative;

    }
</style>
